<template>
    <div id="add-student-form" uk-modal>
        <div class="uk-modal-dialog">
            <form @submit.prevent="submit">
                <button class="uk-modal-close-default" type="button" uk-close></button>
                <div class="uk-modal-header">
                    <h3 class="uk-h2">添加学生</h3>
                </div>
                <div class="uk-modal-body">
                    <div class="uk-form-stacked">
                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-stacked-text">姓名</label>
                            <div class="uk-form-controls">
                                <input class="uk-input" type="text" placeholder="姓名" v-model="form.name" required>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-stacked-text">性别</label>
                            <div class="uk-form-controls">
                                <div class="uk-margin uk-grid-medium uk-child-width-auto uk-grid">
                                    <label><input class="uk-radio" type="radio" name="sex" value="true" v-model="form.sex"> 男</label>
                                    <label><input class="uk-radio" type="radio" name="sex" value="false" v-model="form.sex"> 女</label>
                                </div>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-stacked-text">身高 & 体重</label>
                            <div class="uk-form-controls">
                                <div class="uk-form-controls uk-grid-small" uk-grid>
                                    <div class="uk-width-1-2">
                                        <input class="uk-input" type="number" placeholder="身高" step="0.1" v-model="form.height" required>
                                    </div>
                                    <div class="uk-width-1-2">
                                        <input class="uk-input" type="number" placeholder="体重" step="0.1" v-model="form.weight" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-stacked-text">生日</label>
                            <div class="uk-form-controls uk-grid-small" uk-grid>
                                <div class="uk-width-1-2">
                                    <el-date-picker
                                        v-model="form.birthday"
                                        type="date"
                                        placeholder="选择生日">
                                    </el-date-picker>
                                </div>
                                <div class="uk-width-1-2">
                                    <input class="uk-input" type="text" placeholder="班长 / 生活委员..." v-model="form.job">
                                </div>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-stacked-text">自我介绍</label>
                            <div class="uk-form-controls">
                                <textarea class="uk-textarea" rows="5" placeholder="自我介绍" v-model="form.introduction"></textarea>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="uk-modal-footer uk-text-right">
                    <button class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
                    <button class="uk-button uk-button-primary uk-margin-left" type="submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import UIkit from 'uikit'
export default {
    data() {
        return {
            form: {
                name: '',
                sex: true,
                birthday: new Date(),
                weight: '',
                height: '',
                introduction: ''
            }
        }
    },
    methods: {
        async submit() {
            try {
                const res = await this.$http.post(`/students/`, this.form)
                this.$message.success('创建成功！')
                UIkit.modal('#add-student-form').hide();
                this.$emit('refet', + new Date())
            } catch(e) {
                this.$message.error(e)
            }
        }
    }
}
</script>

<style>

</style>
